
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
    <title>横竖屏切换检测</title>
    <style type="text/css">
        .landscape body {
            background-color: #ff0000;
        }

        .portrait body {
            background-color: #00ffff;
        }
    </style>
    <script type="text/javascript">
        (function(){
            var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");

            var updateOrientation=function(){
                if(supportOrientation){
                    updateOrientation=function(){
                        var orientation=window.orientation;
                        switch(orientation){
                            case 90:
                            case -90:
                                orientation="landscape";
                                break;
                            default:
                                orientation="portrait";
                        }
                        document.body.parentNode.setAttribute("class",orientation);
                    };
                }else{
                    updateOrientation=function(){
                        var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
                        document.body.parentNode.setAttribute("class",orientation);
                    };
                }
                updateOrientation();
            };

            var init=function(){
                updateOrientation();
                if(supportOrientation){
                    window.addEventListener("orientationchange",updateOrientation,false);
                }else{
                    window.setInterval(updateOrientation,5000);
                }
            };
            window.addEventListener("DOMContentLoaded",init,false);
        })();
    </script>
</head>
<body>
<div>
    内容
</div>
</body>
</html>